import { unstable_HistoryRouter as HistoryRouter, Routes, Route } from 'react-router-dom'
import { history } from './utils'
import './App.css'
import { lazy, Suspense } from 'react'

// 按需导入组件
const Login = lazy(() => import('./pages/Login'))
const Layout = lazy(() => import('./pages/Layout'))
const Cargos = lazy(() => import('./pages/Cargos'))
const Merchants = lazy(() => import('./pages/Merchants'))
const Repertory = lazy(() => import('./pages/Repertory'))
const Stockout = lazy(() => import('./pages/Stockout'))
const JoinRoom = lazy(() => import('./pages/JoinRoom'))
const OutRoom = lazy(() => import('./pages/OutRoom'))
const Turnover = lazy(() => import('./pages/Turnover'))
const Debt = lazy(() => import('./pages/Debt'))
const Purchase = lazy(() => import('./pages/Purchase'))
const Receive = lazy(() => import('./pages/Receive'))

function App () {
  return (
    // 路由配置
    <HistoryRouter history={history}>
      <div className="App">
        <Suspense
          fallback={
            <div
              style={{
                textAlign: 'center',
                marginTop: 200
              }}
            >
              loading...
            </div>
          }
        >
          <Routes>
            {/* 创建路由和组件的对应关系 */}
            <Route path='/' element={<Layout />} >
              <Route index element={<Cargos />} />
              <Route path='merchants' element={<Merchants />} />
              <Route path='repertory' element={<Repertory />} />
              <Route path='stockout' element={<Stockout />} />
              <Route path='joinRoom' element={<JoinRoom />} />
              <Route path='outRoom' element={<OutRoom />} />
              <Route path='turnover' element={<Turnover />} />
              <Route path='debt' element={<Debt />} />
              <Route path='purchase' element={<Purchase />} />
              <Route path='receive' element={<Receive />} />
            </Route>

            <Route path='/login' element={<Login />} />
          </Routes>
        </Suspense>
      </div>
    </HistoryRouter>
  )
}

export default App
